{% extends 'base.html' %}

{% block jquerycript %}	
	$(":input").focus
	(
		function() 
		{
			$(this).val("");			
		}
	);
	
	$("#formulario :input").change
	(
		function() 
		{
			var validar = $("#formulario :input").validator({lang: 'es'});
			if (validar.data("validator").checkValidity())
			{
				$.ajax
				(
					{
						type: "POST",
						url: "actualizar/",
						data:	{
									idUsuario: 	{{ user.id}},
									actualPass: $("#actualPass").val(),
									nuevoPass: 	$("#nuevoPass").val(),
									csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
								},
						success: 	function(dato) 
								 	{
										$("#actualPass").val("");
										$("#nuevoPass").val("");
										$("#confirPass").val("");
										alert(dato);
								 	}
					}
				);
			}
		}
	);
	
	$.tools.validator.localize
	(
		"es", 
		{
			'*'				: 'Ingrese un valor valido',
			'[required]' 	: 'Este campo es obligatorio'
		}
	);
	
	$.tools.validator.fn
	(
		"[validar]", function(input, value) 
		{
			validacion = true;
			msg = "";			
			if(input.attr("minlength") != null)
			{
				var min = input.attr("minlength");
				if (value.length < min)
				{
					validacion = false;
					msg = "Este campo debe tener minimo " + min + " caracteres";
				}
			}
			
			if (validacion && input.attr("no-equal") != null)
			{
				var name = input.attr("no-equal");
				field = this.getInputs().filter("[name=" + name + "]");
				if (input.val() == field.val())
				{
					validacion = false;
					msg = "Este campo debe ser diferente al valor actual";
				}
			}
			
			if (validacion && input.attr("equal") != null)
			{
				var name = input.attr("equal");
				field = this.getInputs().filter("[name=" + name + "]");
				if (input.val() != field.val())
				{
					validacion = false;
					msg = "Este campo debe concordar con la nueva contraseña";
				}
			}
			
			if (validacion)	return true;
			else			return {es: msg}; 
		}
	);
{% endblock %}

{% block ruta %}
	<li><a href="/">Inicio</a></li>
	<li>>></li>
	<li>Cambiar contraseña</li>
{% endblock %}

{% block contenido %}
	<div id="content" class="with_sidebar">
		<div id="csrf_token">{% csrf_token %}</div>
		<h1>Cambiar contraseña</h1>
		<table id="formulario" class="formulario" style="width: 100%;">
			<tr>
				<td style="padding: 3px; width: 130px;">Contraseña actual: </td>				
			    <td style="padding: 3px;"><input type="password" name="actualPass" id="actualPass" size="30" required="required" validar="validar" minlength="6" no-equal="nuevoPass"/></td>
			</tr>	
			<tr>
				<td style="padding: 3px;">Nueva contraseña: </td>				
			    <td style="padding: 3px;"><input type="password" name="nuevoPass" id="nuevoPass" size="30" required="required" validar="validar" minlength="6" no-equal="actualPass"/></td>
			</tr>					
			<tr>
				<td style="padding: 3px;">Confirmar contraseña: </td>				
			    <td style="padding: 3px;"><input type="password" name="confirPass" id="confirPass" size="30" required="required" validar="validar" minlength="6" equal="nuevoPass"/></td>
			</tr>		
		</table>
	</div>			
{% endblock %}